<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{URL::asset('js/echarts.js')}}"></script>

<body>
<form class="form form-row">
    <div class="form-group col-md-6">
        <label class="control-label" for="squad">班级</label>
        <select class="form-control" name="squad" id="squad">
            @foreach($squad as $k=>$v)
                <option value="{{$k}}">{{$v}}</option>
            @endforeach
        </select>
    </div>
    <a id="btn_save" class="btn btn-success" style="margin-left:100px">查询</a>
</form>

<div class="box box-body" id="chart_container" style="margin-top:40px">
    <div id="div1" style="height:400px"></div>
    <div id="div2" style="height:400px"></div>
    <div>
        <div id="div3" style="height:400px">
        </div>
        <div id="memo1">
        </div>
    </div>
    <div>
        <div id="div4" style="height:400px;width:50%;float:left"></div>
        <div id="div4_1" style="height:400px;width:50%;float:left"></div>
    </div>
    <div id="div4_1" style="height:400px"></div>
    <div id="div5" style="height:400px"></div>
    <div  style="">
        <div id="div6" style="height:400px">
        </div>
        <div id="memo">
        </div>
    </div>
</div>
</body>


<script type="text/javascript">
$(document).ready(function(){
    $('#squad').select2();
});

$('#btn_save').on('click',function(){

    $('#chart_container').empty();
    $('#chart_container').append('    <div id="div1" style="height:400px"></div>\n' +
        '    <div id="div2" style="height:400px"></div>\n' +
        '    <div>\n' +
        '        <div id="div3" style="height:400px">\n' +
        '        </div>\n' +
        '        <div id="memo1">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div>\n' +
        '        <div id="div4" style="height:400px;width:50%;float:left"></div>\n' +
        '        <div id="div4_1" style="height:400px;width:50%;float:left"></div>\n' +
        '    </div>\n' +
        '    <div id="div4_1" style="height:400px"></div>\n' +
        '    <div id="div5" style="height:400px"></div>\n' +
        '    <div  style="">\n' +
        '        <div id="div6" style="height:400px">\n' +
        '        </div>\n' +
        '        <div id="memo">\n' +
        '        </div>\n' +
        '    </div>');

    $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});

    var request = {};
    request.id = $('#squad option:selected').val();
    $.post('analysis_submit',request,function(e){
        var banji = [];
        var group = [];
        for(i=0;i<e.banji_jiaxiao.length;i++){
            var data = {};
            data.value = e.banji_jiaxiao[i];
            if(i == 0){
                data.name = '80以下';
            }else if(i == 1){
                data.name = '80-84';
            }else if(i == 2){
                data.name = '85-89';
            }else if(i == 3){
                data.name = '90-94';
            }else if(i == 4){
                data.name = '95-100';
            }
            banji.push(data);
        }

        var dom1 = document.getElementById("div1");
        var myChart1 = echarts.init(dom1);

        option = {
            title:{
                text:'板块能力'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            color:'#5DCEC7',
            grid:{
                left:'5%',
                right: '15%',
            },
            xAxis: {
                name:'测试能力板块',
                nameTextStyle:{
                    fontWeight:'bold',
                    fontSize:12
                },
                type: 'category',
                data: e.ability.title,
                axisLabel:{
                    textStyle:{
                        fontSize:12
                    }
                }
            },
            yAxis: {
                name:'各板块得分率',
                nameTextStyle:{
                    fontWeight:'bold',
                    fontSize:15
                },
                type: 'value',
                axisLabel:{
                    fontSize:20
                }
            },
            series: [{
                data: e.ability.data,
                type: 'bar',
                label:{
                    show:true,
                    position:'top',
                    textStyle:{
                        fontSize:25
                    },
                    formatter:'{c}%'
                }
            }]
        };
        myChart1.setOption(option);


        var dom2 = document.getElementById("div2");
        var myChart2 = echarts.init(dom2);

        option = {
            title: {
                text: '及格率和优秀率',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            color:['#C9CACA','#5DCEC7'],
            legend: {
                data: ['及格率', '优秀率']
            },
            grid: {
                left: '5%',
                right: '15%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                name:'及格率和优秀率',
                nameTextStyle:{
                    fontWeight:'bold',
                    fontSize:12
                },
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel:{
                    textStyle:{
                        fontSize:20
                    }
                }
            },
            yAxis: {
                name:'班级',
                nameTextStyle:{
                    fontWeight:'bold',
                    fontSize:15
                },
                type: 'category',
                data: e.title,
                axisLabel:{
                    fontSize:20
                }
            },
            series: [
                {
                    name: '及格率',
                    type: 'bar',
                    data: e.jige,
                    label:{
                        show:true,
                        position:'right',
                        formatter:'{c}%'
                    }
                },
                {
                    name: '优秀率',
                    type: 'bar',
                    data: e.youxiu,
                    label:{
                        show:true,
                        position:'right',
                        formatter:'{c}%'
                    }
                }
            ]
        };

        myChart2.setOption(option);




        var dom3 = document.getElementById("div3");
        var myChart3 = echarts.init(dom3);

        option = {
            title:{
                text:'测试成绩分布趋势'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            tooltip:{
                trigger:'item',
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
            },
            yAxis: [{
                name:'期末测试分数',
                nameTextStyle:{
                    fontWeight:'bold',
                    fontSize:15
                },
                type: 'value',
                min:0,
                max:100
            },{
                name:'考勤全勤率',
                nameTextStyle:{
                    fontWeight:'bold',
                    fontSize:15
                },
                type: 'value',
                min:0,
                max:1
            }],
            legend:{},
            series: [{
                name:'测试成绩',
                data: e.line1,
                type: 'line',
                smooth:true,
                color:"#5DC3C7",
                markLine: {
                    symbol:'none',
                    data: [
                        {
                            yAxis:e.test_avg,
                            name: '平均值',
                            symbol:'none',
                            label: {
                                normal: {
                                    position: 'middle',
                                    formatter: '{c}',
                                    fontSize:15
                                }
                            },
                            lineStyle:{
                                color:'blue',
                                width:2
                            }
                        }
                    ]
                },
            },
                {
                    name:'出勤率',
                    data: e.line2,
                    type: 'line',
                    yAxisIndex:1,
                    smooth:true,
                    color:'red',
                    markLine: {
                        symbol:'none',
                        data: [
                            {
                                yAxis:e.kq_avg / 100,
                                name: '平均值',
                                symbol:'none',
                                label: {
                                    normal: {
                                        position: 'middle',
                                        formatter: '{c}',
                                        fontSize:15
                                    }
                                },
                                lineStyle:{
                                    color:'green',
                                    width:2
                                }
                            }
                        ]
                    },
                }]
        };


        myChart3.setOption(option);
        $('#memo1').text('注：绿色虚线是全勤率平均值，蓝色虚线是测试成绩平均值');



        var dom4_1 = document.getElementById("div4_1");
        var myChart4_1 = echarts.init(dom4_1);

        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            toolbox:{
                feature: {
                    saveAsImage: {}
                }
            },
            color:'red',
            legend: {
                data:['班级家校人数分布']
            },
            grid: {
                left: '5%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis : [
                {
                    name:'人数',
                    nameLocation:'start',
                    nameTextStyle:{
                        fontWeight:'bold',
                        fontSize:12
                    },
                    type : 'value',
                    splitLine:{
                        show:false
                    }
                }
            ],
            yAxis : [
                {
                    name:'家校准交分数',
                    nameTextStyle:{
                        fontWeight:'bold',
                    },
                    type : 'category',
                    axisTick : {show: false},
                    data : ['90以下','90-92','92-94','94-96','96-98','98-100'],
                },
                {
                    show:false,
                    nameTextStyle:{
                        fontWeight:'bold',
                    },
                    type : 'value',
                    axisTick : {show: false},
                    min:40,
                    max:100,
                    splitLine:{
                        show:false
                    }
                }
            ],
            series : [
                {
                    name:'班级家校人数分布',
                    type:'bar',
                    stack:'one',
                    label: {
                        normal: {
                            show: true,
                            formatter:'{c}人',
                            position: 'right'
                        }
                    },
                    data:e.banji_jiaxiao
                },
                {
                    type: 'line',
                    yAxisIndex:1,
                    markLine: {
                        symbol:'none',
                        data: [
                            {
                                yAxis:e.jx_avg,
                                name: '平均值',
                                symbol:'none',
                                label: {
                                    normal: {
                                        position: 'middle',
                                        formatter: '{c}',
                                        fontSize:15
                                    }
                                },
                                lineStyle:{
                                    type:'solid',
                                    color:'blue',
                                    width:2
                                }
                            }
                        ]
                    },
                }
            ]
        };


        myChart4_1.setOption(option);


        var dom4 = document.getElementById("div4");
        var myChart4 = echarts.init(dom4);

        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            toolbox:{
                feature: {
                    saveAsImage: {}
                }
            },
            legend: {
                data:['班级考勤人数分布']
            },
            color:'#5DCEC7',
            grid: {
                left: '5%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    name:'人数',
                    nameLocation:'start',
                    nameTextStyle:{
                        fontWeight:'bold',
                        fontSize:12
                    },
                    type : 'value',
                    axisLabel:{
                        formatter:function(value){
                            return -1 * value;
                        }
                    },
                    splitLine:{
                        show:false
                    }
                }
            ],
            yAxis : [
                {
                    nameTextStyle:{
                        fontWeight:'bold',
                    },
                    type : 'category',
                    axisTick : {show: false},
                    data : ['90以下','90-92','92-94','94-96','96-98','98-100']
                },
                {
                    name:'考勤分数',
                    nameTextStyle:{
                        fontWeight:'bold',
                    },
                    type : 'value',
                    axisTick : {show: false},
                    axisLabel:{
                        show:false
                    },
                    min:40,
                    max:100
                },
            ],
            series : [
                {
                    name:'班级考勤人数分布',
                    type:'bar',
                    stack:'one',
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            formatter:function (value) {
                                return -value.data+'人';
                            }
                        }
                    },
                    data:e.banji_kaoqin.map(function(value){
                        return -1*value;
                    })
                },
                {
                    type: 'line',
                    yAxisIndex:1,
                    markLine: {
                        symbol:'none',
                        data: [
                            {
                                yAxis:e.kq_avg,
                                name: '平均值',
                                symbol:'none',
                                label: {
                                    normal: {
                                        position: 'middle',
                                        formatter: '{c}',
                                        fontSize:15
                                    }
                                },
                                lineStyle:{
                                    type:'solid',
                                    color:'red',
                                    width:2
                                }
                            }
                        ]
                    },
                }
            ]
        };


        myChart4.setOption(option);


        var html = '<table class="table table-primary"><thead id="th1">';
        var eq = 0;
        html += '<th></th>';
        for(i=0;i<e.title.length;i++){
            html += '<th>'+e.title[i]+'</th>';
            if(e.title[i] == $('#squad option:selected').text()){
                eq = i + 1;
            }
        }
        html += '</thead><tbody><tr id="tr1">'+'<td>及格率</td>';

        for(i in e.jige){
            html += '<td>'+e.jige[i]+'</td>';
        }
        html += '</tr>';

        html += '<tr id="tr2">'+'<td>优秀率</td>';

        for(i in e.youxiu){
            html += '<td>'+e.youxiu[i]+'</td>';
        }
        html += '</tr></tbody></table>';
        $('#div5').append(html);

        $('#th1').find("th:eq("+eq+")").css('background-color','#5DCEC7');
        $('#tr1').find("td:eq("+eq+")").css('background-color','#5DCEC7');
        $('#tr2').find("td:eq("+eq+")").css('background-color','#5DCEC7');



        var dom6 = document.getElementById("div6");
        var myChart6 = echarts.init(dom6);

        option = {
            title:{
                text:'班级测试分布'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            grid:{
                right:'15%',
                left:'5%',
            },
            color:'#5DCEC7',
            xAxis: {
                name:'测试分数区间',
                nameGap:25,
                nameTextStyle:{
                    fontWeight:'bold',
                    fontSize:12
                },
                type: 'category',
                data: ['60以下','60-79','80-89','90-100'],
                axisLabel:{
                    textStyle:{
                        fontSize:12
                    }
                }
            },
            yAxis: [
                {
                    name:'人数',
                    nameTextStyle:{
                        fontWeight:'bold',
                        fontSize:15
                    },
                    type: 'value',
                    axisLabel:{
                        fontSize:20
                    }
                },
                {
                    name:'分数',
                    nameTextStyle:{
                        fontWeight:'bold',
                        fontSize:15
                    },
                    type: 'value',
                    min:0,
                    max:100,
                    axisLabel:{
                        fontSize:20
                    }
                }
            ],
            series: [{
                data: e.test,
                type: 'bar',
                label:{
                    show:true,
                    position:'top',
                    textStyle:{
                        fontSize:25,
                        formatter:'{c}人'
                    }
                }
            },{
                type: 'line',
                yAxisIndex:1,
                markLine: {
                    symbol:'none',
                    data: [
                        {
                            yAxis:e.test_avg,
                            name: '平均值',
                            symbol:'none',
                            label: {
                                normal: {
                                    position: 'middle',
                                    formatter: '{c}',
                                    fontSize:15
                                }
                            },
                            lineStyle:{
                                type:'solid',
                                color:'red',
                                width:2
                            }
                        },
                        {
                            yAxis:e.max,
                            name: '最大值',
                            symbol:'none',
                            label: {
                                normal: {
                                    position: 'middle',
                                    formatter: '{c}',
                                    fontSize:15
                                }
                            },
                            lineStyle:{
                                type:'solid',
                                color:'blue',
                                width:2
                            }
                        },
                        {
                            yAxis:e.min,
                            name: '最小值',
                            symbol:'none',
                            label: {
                                normal: {
                                    position: 'middle',
                                    formatter: '{c}',
                                    fontSize:15
                                }
                            },
                            lineStyle:{
                                type:'solid',
                                color:'#000',
                                width:2
                            }
                        }
                    ]
                },
            }]
        };
        myChart6.setOption(option);
        $('#memo').text('注：红线为平均分，蓝线为最高分，黑线为最低分');
    });
});
</script>